<style>
    .marginbody {
        padding-left: 80px;
        padding-right: 80px;
    }

    #Release_user {
        margin: 0 auto;
    }

    .userinfo tr td {
        padding: 5px;
        text-align: center;
    }
</style>

<div id="publishbody" class="marginbody">
    <div class="white  hidden-xs-only">
        <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
    </div>
    <v-layout>
        <v-btn color="blue" class="white--text tpublish">
            发布主题
            <v-icon color="white" class="ml">edit</v-icon>
        </v-btn>
        <v-btn color="blue lighten-3" class="white--text reply">
            回复
        </v-btn>
    </v-layout>
    <table style="cellpadding:0">
        <tr>
            <td id="contentparent" class="white px-5 pt-3">
                <span class="ml-2 title " id="publicsh_title"></span>
                </br>
                <v-avatar size="64">
                    <img class="userimage" style="border-radius: 50%;border: 6px solid #ffffff">
                </v-avatar>
                <span class="ml-2" id="Release_user"></span>
                <span class="ml-2" id="publishtime"></span>
                <span>阅读:</span><span class="ml-2" id="see_num"></span>
                <span>收藏:</span><span class="ml-2" id="collectionnum"></span>
                <span>评论:</span><span class="ml-2" id="comment_num"></span>
                <div id="content_findbykey" class="px-2 ">
                </div>
                <div id="hiddenContent" class="px-2 mt-3">
                </div>
                <div id="warning_info" class="px-2 mt-3 mb-3">
                </div>
            </td>


        </tr>

    </table>
    <v-layout class="white my-3 pt-3" column>
        <span class="title ml-3">{{replynum}}</span>

        <v-layout v-if="whether_reply" align-center justify-start row fill-height class="pl-3 my-3 ml-3"
                  v-for="item in comment">
            <v-avatar>
                <img :src="item.uImage">
            </v-avatar>
            <v-layout column class="ml-5">
                <v-layout row><span class="title">{{item.uName}}</span>
                    <p class="ml-3 body-1">{{getdateTypeDate(item.createtime)}}</p></v-layout>
                <v-layout class="mt-1">{{item.content}}
                </v-layout>
            </v-layout>

        </v-layout>
        <v-layout row class="mt-4 ">

            <v-flex xs9 lg10 class="pl-3" style="margin: auto auto">
                <v-textarea
                        solo
                        v-if="!disabled"
                        id="commentcontent"
                        v-model="commentcontent"
                        :rules="nameRules"
                        color="deep-purple"
                        counter="1000"
                        label="说说你的看法"
                ></v-textarea>
                <v-textarea
                        solo
                        v-if="disabled"
                        id="commentcontent"
                        v-model="commentcontent"
                        :rules="nameRules"
                        color="deep-purple"
                        counter="1000"
                        label="您还没有登录，无法回复"
                ></v-textarea>
            </v-flex>
            <v-flex xs2 lg1 style="margin: auto auto">
                <v-layout>
                    <v-btn color="blue darken-1" class="white--text" @click="publishcomment()" style="margin: auto auto"
                           v-if="!disabled">回复
                    </v-btn>
                    <v-btn color="blue darken-1" class="white--text" @click="publishlogin()" style="margin: auto auto"
                           v-if="disabled">登录
                    </v-btn>
                </v-layout>
            </v-flex>
        </v-layout>
    </v-layout>
</div>
<script>

    var contentBodyId = getCookie("contentBodyId") != null ? getCookie("contentBodyId") : 1;

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }

    new Vue({
        el: "#publishbody",
        data() {
            return {
                commentcontent: "",
                replynum: "评论（0）",
                whether_reply: false,
                userimage_reply_my: "/LxCommunity/static/image/weidenglu.png",
                items: [
                    {
                        text: "论坛",
                        disabled: false,
                        href: '/LxCommunity/'
                    }, {
                        text: 'Java',
                        disabled: false,
                        href: 'breadcrumbs_dashboard'
                    },
                    {
                        text: 'Link 1',
                        disabled: false,
                        href: 'breadcrumbs_link_1'
                    },
                    {
                        text: 'Link 2',
                        disabled: true,
                        href: 'breadcrumbs_link_2'
                    }
                ],
                disabled: true,
                username_reply_my: "未登录",
                comment: [],
                nameRules: [
                    v => !!v || '说说你的看法',
                    v => v.length <= 1000 || '输入的内容不能超过1000'
                ],
                reply_my: '',


            }
        },
        mounted() {
            var self = this;
            //获取评论
            this.userimage_reply_my = getCookie("userimage") != '' ? getCookie("userimage") : "/LxCommunity/static/image/weidenglu.png"
            this.disabled = getCookie("userimage") != '' ? false : true
            this.username_reply_my = getCookie("username") != '' ? getCookie("username") : "未登录"

            axios.get("/LxCommunity/comment/commentBykey/" + contentBodyId).then(data => {
                //  处理返回结果
                if (data.data.flag) {
                    self.whether_reply = true
                    self.comment = data.data.data
                    self.replynum = "最新评论（" + data.data.data.length + "）"
                }


            })


        },
        methods: {
            publishcomment: function () {
                //发表评论
                axios.post("/LxCommunity/comment/addcomment", {

                        contentId: contentBodyId,
                        uId: getCookie("userid"),
                        uName: getCookie("username"),
                        uImage: getCookie("userimage"),
                        createtime: new Date(),
                        content: this.commentcontent


                }).then(data => {
                    //  处理返回结果
                    if (!data.data.flag) {
                        alert("回复失败")
                    }
                });
            }
            ,
            publishreply: function (data) {
                //发表回复
                axios.post("/LxCommunity/comment/addcommentreply", {
                    //    要提交的数据
                    commentId: "",
                    uId: getCookie("userid"),
                    uName: getCookie("username"),
                    uImage: getCookie("userimage"),
                    replyuserId: "",
                    replyuserName: "",
                    replyuserImage: "",
                    praseCount: "",
                    createtime: "",
                    content: "",

                }).then(data => {
                    //  处理返回结果

                });
            }
            ,
            publishlogin: function () {
                location.href = "/LxCommunity/html/login.html"
            }
            ,
            getdateTypeDate: function (publicationTime) {
                var dateTypeDate = "";
                var date = new Date();
                date.setTime(publicationTime);
                dateTypeDate += date.getFullYear();   //年
                dateTypeDate += "-" + date.getMonth() + 1; //月
                dateTypeDate += "-" + date.getDate();   //日
                dateTypeDate += " " + date.getHours();   //日
                dateTypeDate += date.getMinutes() >= 10 ? ":" + date.getMinutes() : ':0' + date.getMinutes();   //日

                return dateTypeDate;
            }

        }
    })
    ;
    $(function () {
        $(".tpublish").click(function () {
            location.href = "/LxCommunity/html/Tpublish.html"
        });

        marginbodyfun();
    });

    function marginbodyfun() {
        var width = $(document.body).width();
        if (width <= 600) {
            $(".marginbody").css({"padding-left": "5px", "padding-right": "5px"})
        } else if (width > 600 && width <= 760) {
            $(".marginbody").css({"padding-left": "20px", "padding-right": "20px"})

        } else if (width > 760 && width <= 960) {
            $(".marginbody").css({"padding-left": "40px", "padding-right": "40px"})

        } else if (width > 960 && width <= 1264) {
            $(".marginbody").css({"padding-left": "70px", "padding-right": "70px"})

        } else if (width > 1200) {
            $(".marginbody").css({"padding-left": "100px", "padding-right": "100px"})

        }
    }

</script>